<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>研学计划分析-基地</title>
		<link rel="stylesheet" type="text/css" href="css/DE/DE_studies_plan_analyze_base.css" />
		<script src="js/DE/highcharts.js"></script>
		<script src="js/DE/exporting.js"></script>
		<script src="js/DE/oldie.js"></script>
		<script src="js/DE/data.js"></script>
		<script src="js/DE/highcharts-zh_CN.js"></script>
		<!-- element引入开始 -->
			<script src="//unpkg.com/vue/dist/vue.js"></script>
			<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
			<!-- 引入样式 -->
			<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
			<!-- 引入组件库 -->
			<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- element引入结束 -->
	</head>
	<body>
		<header></header>
		<section>
			<!-- 标题 -->
			<div id="title-div">
				<p>研学分析统计：基地</p>
			</div>
			<!--年度月份筛选 -->
			<div id="filter">
				<div id="year">
					<div class="block">
					    <el-cascader
						    v-model="value"
					        placeholder="年度"
						    :options="options"
					        :props="{ expandTrigger: 'hover' }"
						    @change="handleChange"></el-cascader>
					</div>
				</div>
				<div id="month">
					<div class="block">
					    <el-cascader
						    v-model="value"
					        placeholder="月份"
						    :options="options"
					        :props="{ expandTrigger: 'hover' }"
						    @change="handleChange"></el-cascader>
					</div>
				</div>
			</div>
			<!-- 区域内基地研学接待量排名 and 区域研学基地数量对比 -->
			<div id="chart-top">
				<div id="receptioncountchartdiv">
					<div id="receptioncountchart" style="width: 100%;height: 100%;"></div>
				</div>
				<div id="basecountcomparisonchartdiv">
					<div id="basecountcomparisonchart" style="width: 100%;height: 100%;"></div>
				</div>
			</div>
			<!-- 搜索团 -->
			<div id="searchresult">
				<div id="search">
					<input id="searchtext" type="text" placeholder="请输入" />
					<img src="img/DE/search-icon.png" width="20px" height="20px" >
				</div>
				<template>
				<div style="padding-left: 50px;">
				  <el-table
				    :data="tableData"
				    style="width: 100%;margin-bottom: 20px;"
				    row-key="id"
				    border
				    default-expand-all
				    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				    <el-table-column
				      prop="name"
				      label="名称"
				      width="150">
				    </el-table-column>
				    <el-table-column
				      prop="area"
				      label="区域"
				      sortable
				      width="100">
				    </el-table-column>
				    <el-table-column
				      prop="administrator"
				      label="行政主管"
				      sortable
				      width="110">
				    </el-table-column>
				    <el-table-column
				      prop="receptionmasscount"
				      label="接待团数"
				      sortable
				      width="110">
				    </el-table-column><el-table-column
				      prop="receptionpeoplecount"
				      label="接待人数"
				      sortable
				      width="110">
				    </el-table-column>
				    <el-table-column
				      prop="tripmasscount"
				      label="出行团数"
				      sortable
				      width="110">
				    </el-table-column><el-table-column
				      prop="trippeoplecount"
				      label="出行人数"
				      sortable
				      width="110">
				    </el-table-column>
				    <el-table-column
				      prop="reservemasscount"
				      label="预定团数"
				      sortable
				      width="110">
				    </el-table-column><el-table-column
				      prop="remark"
				      label="备注"
				      width="80">
					  <template slot-scope="scope">
					  		<el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
					  </template>
				    </el-table-column>
				  </el-table>
				</div>
				</template>
			</div>
		</section>
		<footer></footer>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/DE/DE_studies_plan_analyze_base.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var searchresult = {
			    data() {
			      return {
			        tableData: [{
			          id: 1,
			          name: '郑州市实验中学',
					  area: '高中',
			          administrator: "6000",
					  receptionmasscount: "3000",
					  receptionpeoplecount: "50%",
					  tripmasscount: "5",
					  trippeoplecount: "2",
					  reservemasscount: "0",
					  remark: "查看详情"
			        },{
			          id: 2,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 3,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 4,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 5,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 6,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 7,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 8,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 9,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 10,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 11,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 12,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 13,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 14,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 15,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        }]
			      }
			    },
			  }
			var Ctor = Vue.extend(searchresult)
			new Ctor().$mount('#searchresult')
			// 级联菜单
			var year = {
				data() {
				  return {
					value: [],
					options: [{
					    value: '0',
					    label: '2019年',
					    children: [{
						    value: '0',
						    label: 'HangZhou',
						    children: [{
						        value: '0',
						        label: 'West Lake'
						    }]
						}]
					}, {
						value: '1',
						label: '2018年',
						children: [{
							value: '1',
							label: 'NanJing',
							children: [{
							    value: '1',
							    label: 'Zhong Hua Men'
							}]
						}]
					}]
				  };
				},
				methods: {
				  handleChange(value) {
					console.log(value);
				  }
				}
			};
			var Ctor = Vue.extend(year);
			new Ctor().$mount('#year');
			
			var month = {
				data() {
				  return {
					value: [],
					options: [{
					    value: '0',
					    label: '1月',
					    children: [{
						    value: '1',
						    label: 'HangZhou',
						    children: [{
						        value: '0',
						        label: 'West Lake'
						    }]
						}]
					}, {
						value: '1',
						label: '2月',
						children: [{
							value: '1',
							label: 'NanJing',
							children: [{
							    value: '1',
							    label: 'Zhong Hua Men'
							}]
						}]
					}, {
						value: '2',
						label: '3月'
					}, {
						value: '3',
						label: '4月'
					}, {
						value: '4',
						label: '5月'
					}, {
						value: '5',
						label: '6月'
					}, {
						value: '6',
						label: '7月'
					}, {
						value: '7',
						label: '8月'
					}, {
						value: '8',
						label: '9月'
					}, {
						value: '9',
						label: '10月'
					}, {
						value: '10',
						label: '11月'
					}, {
						value: '11',
						label: '12月'
					}]
				  };
				},
				methods: {
				  handleChange(value) {
					console.log(value);
				  }
				}
			};
			var Ctor2 = Vue.extend(month);
			new Ctor2().$mount('#month');
			
			//区域内基地研学接待量排名
			var chart = Highcharts.chart('receptioncountchart', {
				chart: {
					type: 'bar'
				},
				title: {
					text: '区域内基地研学接待量排名'
				},
				xAxis: {
					categories: ['郑州', '新乡', '焦作', '信阳', '南阳', '许昌', '平顶山', '安阳', '济源'],
					title: {
						text: null
					}
				},
				yAxis: {
					min: 0,
					labels: {
						overflow: 'justify'
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {
							enabled: true,
							allowOverlap: true // 允许数据标签重叠
						}
					}
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'top',
					x: -40,
					y: 100,
					floating: true,
					borderWidth: 1,
					backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
					shadow: true
				},
				series: [{
					name: '数据',
					data: [838, 587, 545, 501, 468, 440, 405, 385, 360]
				}]
			});
			//区域研学基地数量对比
			var chart = Highcharts.chart('basecountcomparisonchart', {
				chart: {
					type: 'bar'
				},
				title: {
					text: '区域研学基地数量对比'
				},
				xAxis: {
					categories: ['郑州', '新乡', '焦作', '信阳', '南阳', '许昌', '平顶山', '安阳', '济源'],
					title: {
						text: null
					}
				},
				yAxis: {
					min: 0,
					labels: {
						overflow: 'justify'
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {
							enabled: true,
							allowOverlap: true // 允许数据标签重叠
						}
					}
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'top',
					x: -40,
					y: 100,
					floating: true,
					borderWidth: 1,
					backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
					shadow: true
				},
				series: [{
					name: '数据',
					data: [18, 17, 25, 15, 14, 26, 12, 11, 10]
				}]
			});
		</script>
	</body>
</html>